<template>
  <ul class="list">
        <li class="item"
        v-for="item of letters"
         :key="item"
            @click="handlieLetterClick"
            @touchstart="handleTouchStart"
            @touchmove="handleTouchMove"
            @touchend ="handleTouchEnd"
            :ref="item"
         >
         {{item}}
         </li>

  </ul>
</template>

<script>
    export default {
      data(){
         return{
           touchstatus : false,
           startY:0,
           timer:null
         }
      },
     props:{
       cities:Object
     },
     updated(){
            const startY  = this.$refs['A'][0].offsetTop
     },
     computed:{
            letters(){
                 const letters=[]
                 for(let i in this.cities){
                   letters.push(i)
                 }
                 return letters
            }
     },

     methods:{
       handlieLetterClick(e){
          //  console.log(e.target.innerText)
          this.$emit('change',e.target.innerText)
       },
       handleTouchStart(){
           this.touchstatus = true
       },
       handleTouchMove(e){
          if(this.touchstatus){
                 if(this.timer){
                   clearTimeout(this.timer)
                 }
                 this.timer = setTimeout(()=>{
                     const touchY = e.touches[0].clientY -79
                     const index = Math.floor((touchY-this.startY)/20)
                     console.log(index)
                // console.log(touchY)
                // console.log(startY)
                    if(index>=0&&index<this.letters.length){
                       this.$emit('change',this.letters[index])
                }
                 })

          }
       },
       handleTouchEnd(){
            this.touchstatus = false
       }
     }
    }
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl';
    .list
      display flex
      flex-direction column
      justify-content center
      position absolute
      right 0
      top 1.58rem
      bottom 0
      .item
          line-height .4rem
          text-align center
          color $bgColor
</style>